<template>
	<view>

		<!--    搜索框-->
		<view class="home_search">
			<view class="home_search_input">
				<uni-icons type="search" size="50rpx"></uni-icons>
				<text class="home_search_text"> 搜索商品</text>
			</view>
		</view>
		<!--    滚动广告-->
		<view class="home-adver-wrap" >
			<swiper class="swiper"  circular :indicator-dots="true" :autoplay="true" :interval="2500" :duration="500">
				<swiper-item v-for="(adv, index) in advert" :key="index">
					<view style="width: 100%;text-align: center;">
						<image :src="adv.image" class="adver-swipper-item"></image> 
					</view>
				</swiper-item> 
			</swiper>
		</view>
		<!--    分类-->
		<swiper style="height: 320rpx;" circular :indicator-dots="true" :autoplay="false" :interval="2500" :duration="500" >
			<swiper-item v-for="(group, groupIndex) in groupedItems" :key="groupIndex" style="display: flex;flex-direction: row;justify-content: space-between;padding-bottom: 0rpx;">
				<view v-for="(item, index) in group" :key="index"  class="swiper-item-row">
					<image :src="item.icon" mode="aspectFill" class="swiper-item-category" ></image>
					<view>{{item.name_zh}}</view>
				</view>

			</swiper-item>
		</swiper>

		<!--    近期推荐-->
		<view class="home_recent_title" style="margin-top: 30rpx;margin-bottom: 30rpx;">
			<view>近期推荐</view>
			<view class="home_recent_title_more">
				<navigator url="/pages/moremore/moremore">更多</navigator>
				<uni-icons type="forward" size="30rpx"></uni-icons>

			</view>

		</view>
		<view class="home-item-wrapper" style="justify-content: space-between;margin-bottom: 30rpx;" v-for="(item,index) in tickets" :key="index">
			<view class="home-item-image-wrapper">
				<image :src="item.cover" mode="aspectFill" 
				style="width: 248rpx;height: 350rpx;border-radius: 30rpx"
				></image>
			</view>
			<view style="width: 30rpx"></view>
			<view class="home-item-text-wrapper" 
			style="display: flex;flex-direction: column;justify-content: space-between;width: 300rpx;margin-bottom: 30rpx;">
				<view>{{item.name_zh}}</view>
				<view class="home-item-tag-wrapper">
					<uni-tag size="small" style="margin-right: 5rpx" :inverted="true" :text="mark.name_zh" type="primary"  v-for="(mark,i) in item.marks" :key="i"/>
				</view>
				<view class="home-item-riqi1" style="color: darkred;">{{item.price==null?"":("￥"+item.price) }}</view>
				<view class="home-item-riqi">{{ formatDate(item.concert_start_time)  }}</view>
				<view class="home-item-loc">{{ item.address_zh || '' }}</view>
			</view>
			<view class="home-purchase-button-wrapper"
				style="display: flex;flex-direction: column;justify-content: center">
				<view class="home-purchase-button-red-wrapper">
					<view class="home-purchase-button-text" style="">购买</view>
				</view>

			</view>
		</view>
	</view>
</template>
 
<script>
	//https://bilet.adaxtv.com//upload/images/b4df906e5d017dc3ea7c9ba83b981063.jpeg
	//https://bilet.adaxtv.com//upload/images/b4df906e5d017dc3ea7c9ba83b981063.jpeg
	//导入request  
	import request  from '@/utils/myrequest';
	export default {
		data() {
			return {
				title: 'Hello', 
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true, 
				autoplay: true,
				interval: 2000,
				duration: 500,
				advert: [],
				      items: [],  // 从服务器获取的原始数据
				      groupedItems: [],  // 分组后的数据，每组n个,
				tickets: [
				]
			}
		},
		onLoad() {
		
		},
		mounted(){

			request({ 
				url: '/api/home/index',
				method: 'GET',
				success: (res) => {
					if (res?.status == 200) {
						this.tickets = res.data.tickets
						this.advert = res.data.advert
						    this.items = res.data.category;  // 假设返回的数据存储在data中
						          this.groupedItems = this.chunkArray(this.items, 3); 
								  console.log(this.groupedItems)
					} else {
						uni.showToast({
							title: res?.msg || '发送失败',
							icon: 'none'
						});
					} 
				}
			});
		},
		methods: {
			formatDate(value) {
			  if (!value) return '';
			  
			  let date = new Date(value);
		
			  let year = date.getFullYear();
			  let month = date.getMonth() + 1;
			  let day = date.getDate();
		
			  let weekDay;
			  switch (date.getDay()) {
				  case 0: weekDay = "星期日"; break;
				  case 1: weekDay = "星期一"; break;
				  case 2: weekDay = "星期二"; break;
				  case 3: weekDay = "星期三"; break;
				  case 4: weekDay = "星期四"; break;
				  case 5: weekDay = "星期五"; break;
				  case 6: weekDay = "星期六"; break;
			  }
		
			  return `${year}年${month}月${day}日 ${weekDay}`;
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			chunkArray(array, chunkSize) {
			  const result = [];
			  for (let i = 0; i < array.length; i += chunkSize) {
			    result.push(array.slice(i, i + chunkSize));
			  }
			  return result;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.home-adver-wrap {
		width: 100%;
		/*margin: 30rpx; */

	}

	.swiper {
		height: 340rpx;
	}

	.home_search_input {
		background: #DBDBDB;
		margin: 0rpx 30rpx 30rpx 30rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding-left: 10rpx;
		padding: 10rpx;
	}
	.adver-swipper-item {
		height: 340rpx;
		width: 690rpx;
		line-height: 240rpx;
		text-align: center;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
	}
	.swiper-item {
		color: red;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		margin: 0rpx 30rpx 0rpx 30rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
	}

	.swiper-item-row {
		height: 260rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex-wrap: wrap;
		text-align: center;
		margin: 30rpx 30rpx 0rpx 30rpx;
	}

	.swiper-item-category {
		display: block;
		height: 190rpx;
		width: 190rpx;
		line-height: 200rpx;
		text-align: center;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
	}

	.uni-bg-red {
		background-color: red;
	}

	.uni-bg-green {
		background-color: green;
	}

	.uni-bg-blue {
		background-color: blue;
	}

	.home_recent_title {
		padding: 0rpx 30rpx 0rpx 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.home_recent_title_more {
		display: flex;
		justify-content: space-between;
	}

	.home-item-wrapper {
		display: flex;
		margin: 0rpx 30rpx 0rpx 30rpx;
	}

	.home-item-tag-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.home-item-riqi {
		color: #8f939c;
		font-size: 10px;
	}

	.home-item-loc {
		color: #8f939c;
		font-size: 10px;
	}

	.home-purchase-button-wrapper {}

	.home-purchase-button-red-wrapper {
		width: 100rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: red;
		border-radius: 50rpx;
		text-align: center;
	}

	.home-purchase-button-text {
		font-size: 25rpx;
		color: white;
	}
</style>